<template>
  <el-dialog
    v-model="drawerVisible"
    :destroy-on-close="true"
    :title="`${drawerProps.title}日报统计`"
    width="74%"
    draggable
    align-center
    custom-class="user-info-dialog"
  >
    <div class="info-container">
      <el-form
        ref="ruleFormRef"
        label-width="100px"
        label-suffix=" :"
        :model="drawerProps.row"
        :hide-required-asterisk="drawerProps.isView"
        label-position="top"
      >
        <el-form-item label="今日工作内容" prop="todayContent">
          <el-input type="textarea" v-model="drawerProps.row!.todayContent" placeholder="请填写今日工作内容" clearable></el-input>
        </el-form-item>
        <el-form-item label="明日工作内容" prop="tomorrowContent">
          <el-input
            type="textarea"
            v-model="drawerProps.row!.tomorrowContent"
            placeholder="请填写明日工作内容"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="今日工作问题" prop="todayProblem">
          <el-input type="textarea" v-model="drawerProps.row!.todayProblem" placeholder="请填写今日工作问题" clearable></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="drawerProps.row!.remark" placeholder="请填写备注" clearable></el-input>
        </el-form-item>
        <el-form-item label="日报图片" prop="reportImgModels">
          <UploadImgs v-model:file-list="drawerProps.row!.reportImgModels" height="140px" width="140px">
            <template #empty>
              <el-icon><Picture /></el-icon>
              <span>请上传照片</span>
            </template>
            <template #tip> 照片大小不能超过 5M </template>
          </UploadImgs>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="drawerVisible = false"> 取消 </el-button>
      <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref } from "vue";
import { User } from "@/api/interface";
import { ElMessage, FormInstance } from "element-plus";
import UploadImgs from "@/components/Upload/Imgs.vue";

interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<User.ResUserList>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {}
});

const drawerVisible = ref(false);

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      await drawerProps.value.api!(drawerProps.value.row);
      ElMessage.success({ message: `操作成功！` });
      drawerProps.value.getTableList!();
      drawerVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
};

defineExpose({
  acceptParams
});
</script>
<style lang="scss">
:deep(.user-info-dialog) {
  display: flex;
  height: 600px;
}
.info-container {
  height: 580px;
}
.info-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 0 30px;
  .el-select,
  .el-cascader,
  .el-date-editor {
    width: 100%;
  }
}
</style>
